<template>
  <!-- 显示表格 -->
    <el-table
      ref="multipleTable"
      :class="[className, rowFocus ? 'focusRow' : '']"
      v-bind="$attrs"
      v-on="$listeners"
      :data="list"
      border
      style="width:100%"
      @selection-change="handleSelectionChange"
      :summary-method="summaryMethod"
      @select-all="selectAll"
    >
      <template v-for="(item, index) in curFieldList">
        <template v-if="item.hidden ? item.hidden(item) : true">
          <el-table-column v-if="item.type === 'selection'" v-bind="item"/>
          <el-table-column
            v-else
            :key="item.prop"
            v-bind="{
              'show-overflow-tooltip': item.type === 'slot' ? item.overflow : true,
              align: 'left',
              ...item
            }"
          >
            <template slot-scope="{row,$index}">
                <template v-if="slotShow(item, row._row_index)">
                  <slot
                    :name="item.slotName"
                    :row="row"
                    :$index="row._row_index === undefined ? $index : row._row_index"
                    :isAdd="row._row_index === data.length - 1"
                    :column="item"
                  />
                </template>
                <template v-else>
                  {{ item.formatter ? item.formatter(row, item) : row[item.prop] }}
                </template>
            </template>
          </el-table-column>
        </template>
      </template>
      <template slot="empty">
        <div v-html="empty" />
      </template>
    </el-table>
</template>

<script>
import { getLocalValue } from '@/utils/auth'
export default {
  name: 'HmTable',
  props: {
    empty: {
      type: String,
      default: '暂无数据'
    },
    // 自定义类名
    className: {
      type: String,
      default: ''
    },
    // 选中列表    lebal prop 必须传   // 表格字段配置
    fieldList: {
      type: Array,
      default: () => {
        return [
          /**
           {
              prop: "item.prop"
              label:"item.label"
              fixed:"item.fixed || ''"
              type:"item.type || ''"
              // 开启焦点行后， 当前行未获取焦点时 也展示slot
              slotShow: true
              align:"item.align || 'center'"
              width:"item.width||''"
              minWidth="item.minWidth || '100'"
              overflow="item.overflow || true"
            }
           */
        ]
      }
    },
    // 列表数据
    data: {
      type: Array,
      default() {
        return []
      }
    },
    defaultSort: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      selection: [],
      iconLocation: { top: 0, left: 0 },
      cacheFieldLists: [],
      curFieldList: [],
      customKey: null,
      isCustom: false,
      // 是否启用虚拟滚动
      isVirtual: false,
      // 表格焦点行 索引
      focusIndex: null,
      // 表格焦点行 索引
      rowFocus: false,
      curIndex: 0,
      showRowNum: 15,
      scrollTop: null,
      manageScrollTop: 0,
      allChecked: false,
      elementResize: null,
      elTables: null,
      maxHeight: null,
      // 记录列表页面 表格滚动距离
      manageTableScrollTop: 0
    }
  },
  computed: {
    list({ data }) {
      return data
    }
  },
  created() {
    this.curFieldList = this.fieldList
  },
  methods: {
    // slot 控制slot展示状态
    slotShow(item, index) {
      // 插槽名称不存在
      if (!item.slotName) return false
      // 开启焦点行后， 当前行未获取焦点时 也展示slot
      if (item.slotShow) return true
      // 开启焦点行后， 当前行获取焦点时 展示slot
      // 没开启焦点行时 展示slot
      return !this.rowFocus || (this.rowFocus && index === this.focusIndex)
    },

    clearSelection() {
      this.$nextTick(() => {
          this.$refs['multipleTable'].clearSelection([])
      })
    },
    toggleRowSelection(row, selected) {
      this.$nextTick(() => {
        if (this.isVirtual) {
          if (row) {
            let item = this.data[row._row_index]
            this.$set(item, '_checked', selected === undefined ? true : selected)
          }
          this.virtualCheck()
        } else {
          this.$refs['multipleTable'].toggleRowSelection(...arguments)
        }
      })

    },
    toggleAllSelection() {
      this.$nextTick(() => {
          this.$refs['multipleTable'].toggleAllSelection()
      })
    },
    // 派发按钮点击事件
    handleClick(event, data) {
      this.$emit('handleClick', event, data)
    },
    // 选中数据
    handleSelectionChange(rows) {
      this.selection = rows
      this.$listeners.handleSelectionChange && this.$listeners.handleSelectionChange(rows)
      this.$emit('selectChange', rows)
    },
    // 手动修改select选中状态
    handleSelect(selection, row) {
      this.$emit('select', selection, row)
    },
    selectAll(selection) {
      this.$emit('selectAll', selection)
    },
    clearSort() {
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSort()
      })
    },
    // 合计方法
    summaryMethod({ columns, data }) {
      let fun = this.$attrs['summary-method']
      return fun && fun({
        columns,
        data: this.data
      })
    }
  }
}
</script>